<template>
	<view class="add-address">
		<view class="module">
			<u-form
				labelPosition="left"
				:model="formData"
				labelWidth="160rpx"
				ref="form"
			>
				<u-form-item label="收货人" prop="name">
					<u-input v-model="formData.name" placeholder="收货人" border="none" clearable />
				</u-form-item>
				<u-form-item label="手机号码" prop="phone">
					<u-input v-model="formData.phone" placeholder="收货人手机号" border="none" clearable type="number" />
				</u-form-item>
				<u-form-item label="所在地区" prop="region">
					<u-input v-model="formData.region" placeholder="省市区县、乡镇等" border="none" clearable />
				</u-form-item>
				<view class="form-label-top margin-top-7">
					<u-form-item label="详细地址" prop="address">
						<u-textarea v-model="formData.address" placeholder="街道、门牌号等" border="none" clearable />
					</u-form-item>
				</view>
				<view class="form-label-top">
					<u-form-item label="标签" prop="tag">
						<view class="tag-list d-flex flex-wrap">
							<u-tag
								v-for="item in tags"
								:key="item"
								:text="item"
								:bgColor="item === formData.tag ? '#2F75FA' : '#fff'"
								:color="item === formData.tag ? '#fff' : '#000'"
								size="mini"
								borderColor="#ddd"
								shape="circle"
								@click="onClickTag(item)"
							/>
							<u-tag
								text="+"
								bgColor="#fff"
								color="#000"
								size="mini"
								borderColor="#ddd"
								shape="circle"
							/>
						</view>
					</u-form-item>
				</view>
				<view class="set-default">
					<u-form-item label="设为默认">
						<u-switch v-model="isDefault" space="2" inactiveColor="#F3F3F3" />
					</u-form-item>
				</view>
			</u-form>
		</view>
		
		<view class="module">
			<view class="smart-write">
				<u-text text="智能填写" color="#999999" size="28rpx" />
				<u-textarea v-model="textarea" placeholder="粘贴地址信息，可自动识别并填写如:\n\n小明，138********，xx省xx市 xx区xx街道 xxxxx" border="none" />
				<view class="d-flex justify-end">
					<u-button text="确认" shape="circle" :disabled="!textarea.length" @click="smartWrite" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
				</view>
			</view>
		</view>
		
		<view class="bottom-add-btn">
			<u-button text="保存" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {},
			tags: ['家', '公司', '学校'],
			textarea: '',
			isDefault: false,
		}
	},
	onLoad(options) {
		this.formData = options;
		this.isDefault = options.default === 'true';
	},
	methods: {
		smartWrite() {
			
		},
		onClickTag(item) {
			this.$set(this.formData, 'tag', item);
		},
		add() {
			console.log(this.formData);
		}
	}
}
</script>

<style lang="scss" scoped>
.add-address {
	min-height: 100vh;
	background-color: #f6f6f6;
	padding: 25rpx;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	.module {
		background-color: #fff;
		border-radius: 20px;
		
		& + .module {
			margin-top: 25rpx;
		}
	}
	
	/deep/.u-form {
		padding: 20rpx 30rpx 40rpx;
		
		&-item__body__left__content__label {
			color: #999;
		}
		
		.set-default {
			.u-form-item__body__left__content__label {
				color: #000;
			}
		}
		
		.tag-list {
			margin-left: -30rpx;
			margin-top: -18rpx;
			
			> view {
				margin-left: 30rpx;
				margin-top: 18rpx;
			}
			
			.u-tag {
				min-width: 110rpx;
				justify-content: center;
			}
		}
	}
	
	/deep/.smart-write {
		padding: 40rpx 30rpx 20rpx;
		
		.u-textarea {
			background-color: #F3F3F3;
			border-radius: 10px;
			margin: 30rpx 0 20rpx;
			
			textarea {
				white-space: pre-line;
				font-size: 24rpx;
			}
		}
		
		.u-button {
			flex: 0 1 140rpx;
			margin: 0;
			height: 60rpx;
			
			&--disabled {
				opacity: 1;
				background: #DCDCDC !important;
			}
		}
	}
}
</style>
